<!-- @format -->

<template>
  <view class="easyClear">
    <child-header-bar
      :childTitle="childTitle"
      @getMarginTop="getMarginTop"></child-header-bar>
    <view class="easyClear-content" :style="[{ top: top + 'px' }]">
      <view class="activity">
        <view class="masonry">
          <view class="item" v-for="item in skiList" :key="item">
            <view @tap="goDetail(item)">
              <image class="itemImg" mode="widthFix" :src="getImage(item.photo)" />
              <view class="characters">
                <text>{{ item.oneOrderTitle }}</text>
                <view class="charaLine"></view>
              </view>
            </view>
            <image
              class="delete"
              @tap="deteleTrip(item.oneOrderId)"
              src="../../static/popular/delete.png"
              mode="scaleToFill" />
          </view>
        </view>
      </view>

      <view class="activPlus" @tap="addTrip">
        <image src="../../static/collection/plus.png" mode="scaleToFill" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		imgList:'',
      childTitle: '我的行程单',
      top: 68,
      tabIndex: 0,
      skiList: [],
      params: {
        pageNum: 1,
        pageSize: 20,
        mobile: 0,
      },
      phonenumber: 0,
      status: [],
    }
  },

  onLoad() {
    let _this = this
    _this.params.mobile = uni.getStorageSync('phonenumber')
    this.getNewList()
  },

  methods: {
	  getImage(titleImg) {
	    if (titleImg && titleImg.includes(",")) {
	      let imageList = titleImg.split(",");
	      return imageList[0];
	    } else {
	      return titleImg
	    }
	  },
    // 动态接收导航栏高度
    getMarginTop(marginTop) {
      this.top = marginTop ? marginTop : 150
    },
    changeTab(index) {
      this.tabIndex = index
    },
	getSwiperList(data) {
	  if (data.photo) {
	    this.imgList = data.photo.split(',')
	  }
	},
    // 行程列表数据
    getNewList() {
      let _this = this
      wx.request({
        url: this.$httpApi.install.orderList,
        method: 'GET',
        data: this.params,
        success(res) {
			console.log('======================')
			console.log(res)
          _this.skiList = res.data.rows
        },
      })
    },
    // 删除
    deteleTrip(oneOrderId) {
      let _this = this
      wx.showModal({
        title: '提示',
        content: '您确定要删除吗',
        success: (res) => {
          if (res.confirm) {
            wx.request({
              url: this.$httpApi.install.orderDelete + oneOrderId,
              method: 'DELETE',
              success(res) {
                uni.showToast({ icon: 'success', title: '删除成功~' })
                _this.getNewList()
              },
            })
          } else {
            //这里是点击了取消以后
            console.log('用户点击取消')
          }
        },
      })
    },
    // 新增行程单
    addTrip() {
      uni.navigateTo({
        url: '/myPackageB/pages/orderSucceed/orderSucceed',
      })
    },
    // 详情
    goDetail(item) {
      uni.navigateTo({
        url: `/myPackageA/pages/Itinerary/index?oneOrderId=${item.oneOrderId}&slopeId=${item.slopeId}&title=${item.oneOrderTitle}&img=${item.photo}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.activPlus {
  position: absolute;
  position: fixed;
  top: 930rpx;
  right: 10rpx;
  width: 116rpx;
  height: 116rpx;
  background: #303030;
  border-radius: 50%;
  opacity: 0.63;
  image {
    width: 50rpx;
    height: 50rpx;
    margin-left: 33rpx;
    margin-top: 33rpx;
  }
}
.easyClear-content {
  position: absolute;
  /* padding: 0 30rpx; */
}

.activity {
  width: 100%;
  background-color: #fff;
}
/* 小部件 */
.widgets {
  padding: 20rpx 25rpx 0;
  height: 100vh;
  background-color: #f7f7f8;
}

.masonry {
  // width: 360px; // 默认宽度
  // height: 100vh;
  margin: 20px 8px;
  columns: 2; // 默认列数
  // column-gap: 10px; // 列间距
  background-color: #f8fafe;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}

.item {
  width: 100%;
  padding-bottom: 30rpx;
  break-inside: avoid;
  margin-bottom: 10px;
  background-color: #fff;
}

.item .itemImg {
  width: 100%;
  border-top-left-radius: 20rpx !important; /* 左上角 */
  border-top-right-radius: 20rpx !important; /* 右上角 */
}

.characters {
  padding-left: 16rpx;
  padding-right: 11rpx;
  .charaLine {
    margin-top: 10rpx;
    // width: 336rpx;
    height: 0rpx;
    opacity: 1;
    border: 1rpx solid #dee3e8;
  }
}
.delete {
  width: 30.95rpx;
  height: 30.95rpx;
  margin-left: 283rpx;
  margin-top: 20rpx;
}
.item text {
  padding: 8px 0;
  font-size: 24rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  color: #464646;
  line-height: 30rpx;
}
</style>
